<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">    

    <ui:composition template="/template.xhtml">        
        <ui:define name="title">
            <h:outputText value="#{rotacion.TituloNuevaRotacion}"></h:outputText>
        </ui:define>

        <ui:define name="body">       
            <h:form id="tablaRotacion" style="font-size: small">
                <p:panel header="Creación de la tabla de Rotación" style="background: white" >                    
                    <p:accordionPanel>
                        <p:tab title="Selección de Datos">
                            <table>
                                <tr>
                                    <th align="right" scope="row">Inicio de Rotación:</th>
                                    <td>
                                        <p:calendar style=" margin-top: 10px" locale="es"  value="#{rotacionController.fechaInicio}"                                                     
                                                    size="21" id="rotacionFechaInicio" pattern="yyyy/dd/MM" mode="popup" showOn="button">
                                            <f:convertDateTime type="date" locale="es_EC" timeZone="America/Guayaquil"  
                                                               dateStyle="default" pattern="yyyy/dd/MM" />
                                        </p:calendar>
                                    </td>
                                </tr>
                                <tr>
                                    <th align="right" scope="row">Selección de Rutas:</th>
                                    <td>
                                        <p:selectCheckboxMenu label="Rutas" 
                                                              id="console1" required="true"
                                                              value="#{rotacionController.rutas}" style=" margin-top: 10px; height: 30px; width: 250px">                                            
                                            <f:selectItems value="#{rutaController.rutasDisponibles}" var="rutasPeriodos"
                                                           itemLabel="#{rutasPeriodos.codigo} - #{rutasPeriodos.nombre}" itemValue="#{rutasPeriodos.nombre}"/>                                            
                                        </p:selectCheckboxMenu>
                                    </td>
                                </tr>
                                <tr>
                                    <th align="right" scope="row">Unidad Inicial - Unidad Final:</th>
                                    <td>
                                        <p:inputText size="5" value="#{rotacionController.unidadInicial}"/> - <p:inputText  size="5" value="#{rotacionController.unidadFinal}"/>                                                                                             
                                    </td>
                                </tr>                                                             
                                <tr>
                                    <th align="right" scope="row">Unidad Inicial Fin de Semana:</th>
                                    <td>
                                        <p:inputText size="5" value="#{rotacionController.unidadInicialDescanso}"/>     
                                    </td>
                                </tr> 
                            </table>    
                            <div align="right">
                                <p:commandButton ajax="false" update="visualizar,guardar" action="#{rotacionController.crearRotacion()}" value="Cargar Datos"/>
                            </div>
                        </p:tab>

                        <p:tab id="visualizar" title="Visualización tabla de Rotación">

                            <p:dataTable  var="item" emptyMessage="" value="#{rotacionController.diasOrd}">
                                <f:facet name="header">
                                    <h:outputText value="ROTACIÓN ORDINARIA"/>                                        
                                </f:facet>                                  
                                <p:columns style="width: 20px;" var="fechas" value="#{rotacionController.fechaOrdinarios}"
                                           columnIndexVar="i">                                    

                                    <f:facet name="header">
                                        <h:outputText value="#{fechas}">
                                            <f:convertDateTime pattern="dd/MMM" locale="es_EC" timeZone="America/Guayaquil" />
                                        </h:outputText>
                                    </f:facet>  
                                    <div align="center">
                                        <p:outputLabel value="#{item.get(i)}" /> 
                                    </div>
                                </p:columns>                                                                                                                                                                                                        
                            </p:dataTable>    
                            <br></br>

                            <p:dataTable var="item2" emptyMessage="" value="#{rotacionController.diasSab}">
                                <f:facet name="header">
                                    <h:outputText value="ROTACIÓN SÁBADOS"/>                                        
                                </f:facet>  
                                <p:columns style="width: 20px;"  var="fechas2" value="#{rotacionController.fechaSabados}"
                                           columnIndexVar="i">                                    
                                    <f:facet name="header">
                                        <h:outputText value="#{fechas2}">
                                            <f:convertDateTime pattern="dd/MMM" locale="es_EC" timeZone="America/Guayaquil" />
                                        </h:outputText>
                                    </f:facet>  
                                    <p:outputLabel value="#{item2.get(i)}" /> 
                                </p:columns>                                                                                                                                                                                                        
                            </p:dataTable> 

                            <br/>
                            <p:dataTable var="item3" emptyMessage="" value="#{rotacionController.diasDom}">
                                <f:facet name="header">
                                    <h:outputText value="ROTACIÓN DOMINGOS"/>                                        
                                </f:facet>  
                                <p:columns style="width: 20px;"  var="fechas3" value="#{rotacionController.fechaDomingos}"
                                           columnIndexVar="i">                                    
                                    <f:facet name="header">
                                        <h:outputText value="#{fechas3}">
                                            <f:convertDateTime pattern="dd/MMM" locale="es_EC" timeZone="America/Guayaquil" />
                                        </h:outputText>
                                    </f:facet>  
                                    <p:outputLabel value="#{item3.get(i)}" /> 
                                </p:columns>                                                                                                                                                                                                        
                            </p:dataTable> 

                        </p:tab>

                        <p:tab id="Guardar" title="Resumen">
                            <p:dataTable id="basicDT3" var="item" 
                                         value="#{rotacionController.resumenRotacion}" 
                                         style="font-size: small; margin-top:20px">

                                <f:facet name="header">
                                    Resumen de Rotación
                                </f:facet>

                                <p:column headerText="Unidad" style="width: 50px">
                                    <p:outputLabel value="#{item.unidad}" />
                                </p:column>
                                <p:column headerText="Dias" style="width: 50px">
                                    <p:outputLabel value="#{item.dias}" />
                                </p:column>
                                <p:column headerText="Kilómetros" style="width: 50px">
                                    <h:outputText value="#{item.kilometraje}">
                                        <f:convertNumber pattern="#0.00" />
                                    </h:outputText>
                                </p:column>                               
                            </p:dataTable>     
                            <p:commandButton ajax="false" id="btnValidar"
                                             value="Guardar Rotación" actionListener="#{rotacionController.guardarRotación()}"/>                            
                        </p:tab>                        
                    </p:accordionPanel>
                </p:panel>           
            </h:form>
        </ui:define>

    </ui:composition>
</html>

